
body{


    margin: 0px;
    padding: 0px;
    /*position: absolute;*/
    width: auto;
    min-width: 800px;
    /*background: #00B7FF;*/
    overflow: auto;


}
*{

    padding: 0px;
    margin: 0px;

}


.show-title{

    text-align: center;
    font-size: 28px;
    padding-top: 24px;
    padding-bottom: 16px;

}
.exp-title{

    font-size: 24px;
    text-align: left;
}
.exp-info{

    line-height: 1.8rem;

}
.show-text-info{

    text-align: center;
    font-size: 14px;
    width: 40%;
    margin-left: -20%;
    position: relative;
    left: 50%;


}
.nav-bar{

    width: 100%;
    height: 60px;
    /*background-color: aquamarine;*/
    display: flex;
}

.nav-bar .icon{

    display: flex;
    width: 140px;
    /*background-color: brown;*/
    height: 100%;
    margin-left: 10%;
}

.nav-bar .icon img{
     width: 52px;
     height: 52px;
 }

.nav-bar .icon p {

    font-size: 20px;
    margin-left: 8px;
    padding-top: 16px;
}

.nav-bar .menu-select{


    padding-left: 12px;
    padding-right: 12px;
    width:auto;
    height: 100%;
   /*background-color: royalblue;*/
    margin-left: 36%;
}

.nav-bar .menu-select ul li{

    padding-top: 16px;
    list-style: none;
    display: inline-block;
    margin-left: 18px;

}

.menu-select a{

    text-decoration: none;
    color: black;

}
.menu-select ul li:hover{

    opacity: 0.6;
}

.show-box{

    width: 100%;
    padding-bottom: 32px;
    height: auto;
    /*background-color: beige;*/
}

.show-box .title{

    text-align: center;
    font-size: 24px;
    padding-top: 80px;

}
.show-box .info{

    padding-top: 12px;
    width: 40%;
    position: relative;
    line-height: 1.8rem;
    left: 50%;
    text-align: center;
    margin-left: -20%;

}

.show-box .btn{

    margin-top: 24px;
    width: 180px;
    height: 40px;
    border-radius: 24px;
    background-color: orange;
    position: relative;
    left: 50%;
    margin-left: -90px;
    opacity: 0.8;

}

.show-box .btn:active{

    opacity: 0.6;
}
.show-box .btn:hover{
    opacity: 1;
}

.show-box .img-show{

    width: 50%;
    margin-top: 24px;
    height: 260px;
    /*background-color: gold;*/
    position: relative;
    margin-left: -25%;
    left: 50%;
}

.controller{

    width: 100%;
    /*background-color: rgba(243,252,255,0.6);*/
    height: auto;
    padding-bottom: 36px;
    padding-top: 24px;
}

.controller .icon-info{

    width: 240px;
    height: auto;
    padding-bottom: 24px;
    position: relative;
    left: 50%;
    /*background-color: greenyellow;*/
    margin-left: -120px;
}


.controller .icon-info img{

    position: relative;
    left: 50%;
    width: 40px;
    margin-left: -20px;

}

.controller .menus{

    width: 50%;
    height: 120px;
    /*background-color: orange;*/
    position: relative;
    left: 50%;
    margin-left: -25%;
    display: flex;
}

.menus .menu-child{

    width: 28%;
    height: 100%;
    /*background-color: antiquewhite;*/
    margin-left:3%;
    margin-right: 1.3%;

}

.menu-child .menu-icon{

    width: 48px;
    height: 48px;
    position: relative;
    left: 50%;
    margin-left: -24px;
    margin-top: 16px;

}

.menu-child .menu-text{

    text-align: center;
    font-size: 14px;
    padding-top: 12px;
    color: black;
    font-weight: normal;
}


.show-before{

    width: 100%;
   padding-bottom: 24px;
    height: auto;
    /*background-color: blueviolet;*/


}

.changeImg{

    margin-left: 24px;


}
.show-exp{

    width: 100%;
    height: auto;
    padding-top: 24px;
    /*background-color: white;*/
    padding-bottom: 34px;

}

.show-exp .show-p1{

    display: flex;
    width: 80%;
    padding-top: 12px;
    height: auto;
    /*background-color: orange;*/
    margin-left: 8%;
}


.show-p1 .show-left{

    margin-left: 10%;
    width: 40%;
    height: auto;
    /*background-color: red;*/
    padding-top: 62px;
    padding-left: 4px;

}


.show-p1 .show-right{

    width: 60%;
    height: auto;
    /*background-color: aqua;*/
    padding-left: 24px;

}


.show-right img{

    width: 100%;
}

.how-log{

    width: 100%;
    padding-top: 12px;
    /*background-color: rgba(243,252,255,0.8);*/
    height: auto;
    padding-bottom: 24px;
}
.how-log .how-work{

    margin-top: 12px;
    position: relative;
    left: 90%;
    margin-left: -45%;
    width: 10%;

}
/*img*/
/*{*/
    /*image-rendering: optimizeSpeed;*/
    /*image-rendering: -moz-crisp-edges; !* Firefox *!*/
    /*image-rendering: -o-crisp-edges; !* Opera *!*/
    /*image-rendering: pixelated;*/
    /*-ms-interpolation-mode: nearest-neighbor; !* IE (non-standard property) *!*/
/*}*/


.footer{

    width: 100%;
    background-color: rgba(120,120,120,1);
    height: 120px;
    display: flex;
    /*padding-bottom: 12px;*/
    /*position:absolute;*/
    z-index: 1000;
    /*top: 100%;*/
    /*bottom: 0px;*/
}
.footer p{

    width: 20%;
    text-align: center;
    line-height: 40px;
}

.footer a{

   color: white;
    text-decoration: none;
}

